<template>
  <div class="wrapper">
    <comp-pagetitle><template>车型总览</template></comp-pagetitle>
    <div class="car-nav">
      <ul>
        <li :class="index == 1 ? 'active' : ''" @click="index = 1">全部车型</li>
        <li :class="index == 2 ? 'active' : ''" @click="index = 2">纯电</li>
        <li :class="index == 3 ? 'active' : ''" @click="index = 3">轿跑</li>
        <li :class="index == 4 ? 'active' : ''" @click="index = 4">SUV/MPV</li>
      </ul>
    </div>
    <div class="car-content">
      <ul v-if="index == 1 ? true : false">
        <li>
          <comp-overcar>
            <template v-slot:title><p>UX 300e</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000036.png" alt=""
            /></template>
            <template v-slot:carname><span>豪车纯电动车型</span></template>
            <template v-slot:price><span>362,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:0}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
            <template v-slot:title><p>ES</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000002.png" alt=""
            /></template>
            <template v-slot:carname><span>中大型豪华行政级轿车</span></template>
            <template v-slot:price><span>294,900元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:1}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
            <template v-slot:title><p>LS</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000003.png" alt=""
            /></template>
            <template v-slot:carname><span>旗舰级豪华轿车</span></template>
            <template v-slot:price><span>878,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:2}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
            <template v-slot:title><p>LC</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000004.png" alt=""
            /></template>
            <template v-slot:carname><span>旗舰级豪车GT轿跑</span></template>
            <template v-slot:price><span>1,155,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:3}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
            <template v-slot:title><p>UX</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000005.png" alt=""
            /></template>
            <template v-slot:carname><span>豪车都市SUV</span></template>
            <template v-slot:price><span>259,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:4}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
            <template v-slot:title><p>NX</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000006.png" alt=""
            /></template>
            <template v-slot:carname><span>中型豪华SUV</span></template>
            <template v-slot:price><span>302,200元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:5}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
           <template v-slot:title><p>RX</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000007.png" alt=""
            /></template>
            <template v-slot:carname><span>中大型豪华SUV</span></template>
            <template v-slot:price><span>405,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:6}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li> 
        <li>
          <comp-overcar>
            <template v-slot:title><p>LM</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000008.png" alt=""
            /></template>
            <template v-slot:carname><span>旗舰级豪华MPV</span></template>
            <template v-slot:price><span>1,166,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:7}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
      </ul>
      <ul v-if="index == 2 ? true : false">
        <li>
          <comp-overcar>
            <template v-slot:title><p>UX 300e</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000036.png" alt=""
            /></template>
            <template v-slot:carname><span>豪车纯电动车型</span></template>
            <template v-slot:price><span>362,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:0}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
      </ul>
      
      <ul v-if="index == 3 ? true : false">
        <li>
          <comp-overcar>
            <template v-slot:title><p>ES</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000002.png" alt=""
            /></template>
            <template v-slot:carname><span>中大型豪华行政级轿车</span></template>
            <template v-slot:price><span>294,900元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:1}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
            <template v-slot:title><p>LS</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000003.png" alt=""
            /></template>
            <template v-slot:carname><span>旗舰级豪华轿车</span></template>
            <template v-slot:price><span>878,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:2}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
            <template v-slot:title><p>LC</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000004.png" alt=""
            /></template>
            <template v-slot:carname><span>旗舰级豪车GT轿跑</span></template>
            <template v-slot:price><span>1,155,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:3}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
      </ul>
      <ul v-if="index == 4 ? true : false">
       <li>
          <comp-overcar>
            <template v-slot:title><p>UX</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000005.png" alt=""
            /></template>
            <template v-slot:carname><span>豪车都市SUV</span></template>
            <template v-slot:price><span>259,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:4}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
            <template v-slot:title><p>NX</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000006.png" alt=""
            /></template>
            <template v-slot:carname><span>中型豪华SUV</span></template>
            <template v-slot:price><span>302,200元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:5}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
        <li>
          <comp-overcar>
           <template v-slot:title><p>RX</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000007.png" alt=""
            /></template>
            <template v-slot:carname><span>中大型豪华SUV</span></template>
            <template v-slot:price><span>405,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:6}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li> 
        <li>
          <comp-overcar>
            <template v-slot:title><p>LM</p></template>
            <template v-slot:pic
              ><img src="@/assets/images/home/home_100000008.png" alt=""
            /></template>
            <template v-slot:carname><span>旗舰级豪华MPV</span></template>
            <template v-slot:price><span>1,166,000元起</span></template>
            <template v-slot:link1><a @click="$router.push({path:'/car',query:{id:7}})">车型详情 ></a></template>
            <template v-slot:link2><a @click="$router.push({path:'/drive'})">预约试驾 ></a></template>
          </comp-overcar>
        </li>
      </ul>
    </div>
    <comp-footer></comp-footer>
  </div>
</template>

<script>
import CompPagetitle from "@/components/comp-pagetitle.vue";
import CompOvercar from "@/components/comp-overcar.vue";
import CompFooter from "@/components/comp-footer.vue";
export default {
  name: "OverView",
  data() {
    return {
      index: 1,
    };
  },
  components: {
    CompOvercar,
    CompFooter,
    CompPagetitle
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 1140px;
  margin: 0 auto;
}
.car-nav {
  ul {
    display: flex;
    justify-content: center;
    li {
      padding-bottom: 10px;
      cursor: pointer;
      margin: 40px 30px;
      color: #686868;
    }
    li:hover {
      color: #000;
    }
    li.active {
      color: #000;
      border-bottom: 1px solid #000;
    }
  }
}
.car-content {
  ul {
    display: flex;
    flex-wrap: wrap;
  }
}
a{
  cursor: pointer;
}
</style>